<template>
  <div>
    <div style="width:100%;background-color:#302C42;">
        <headerComponent :isUserNameShow="false"></headerComponent>
      </div>
    <div class="register-header" style="width: 100%; height: 200px">
      <span
        style="
          position: absolute;
          left: 50%;
          top: 50%;
          font-size: 30px;
          font-weight: 600;
          color: white;
          transform: translate(-50%, -50%);
        "
        >实名认证</span
      >
    </div>
    <div class="user-register">
      <el-card class="box-card">
        <div v-if="isRegisterIsShow">
          <span>认证成功</span>
        </div>
        <div v-else>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="证件类型" prop="cardType">
              <el-select
                v-model="ruleForm.cardType"
                placeholder="请选择证件类型"
                style="width: 190px"
                size="small"
              >
                <el-option label="居民身份证" value="0"></el-option>
                <el-option label="护照" value="1"></el-option>
                <el-option label="港澳居民通行证" value="B"></el-option>
                <el-option label="台湾居民通行证" value="C"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="cardId">
              <el-input
                style="width: 190px"
                size="small"
                v-model="ruleForm.cardId"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认证件号" prop="cardIdTwo">
              <el-input
                style="width: 190px"
                size="small"
                v-model="ruleForm.cardIdTwo"
              ></el-input>
            </el-form-item>
            <password-captcha ref="captcha" @getCaptcha="getCaptcha"></password-captcha>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确认</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        background-color: #302c42;
        height: 60px;
        margin-top: 40px;
        position: fixed;
        bottom: 0px;
        z-index: 2;
      "
    >
      <span class="footer-content"
        >Copyright © All Right By
        <a style="color: white; cursor: pointer" href="#"
          >上海财才网信息科技有限公司</a
        ></span
      >
    </div>
  </div>
</template>

<script>
import headerComponent from '../userComponent/headerComponent.vue'
import store from '../../../store/index'
import {getPersonVerifyUrl,getPersonUserInfo,createUser } from "../../../request/api";
import PasswordCaptcha from '../../../components/TencentCaptcha/passwordCaptcha.vue';
export default {
  name: "index",
  data() {
    var phone_rule = (rule, value, callback) => {
      let phoneRule = /^1[23456789]\d{9}$/;
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!phoneRule.test(value)) {
        callback(new Error("手机号码格式错误"));
      } else {
        callback();
      }
    };
    var cardIdTwo = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入证件号码'));
        } else if (value !== this.ruleForm.cardId) {
          callback(new Error('两次输入证件号码不一致!'));
        } else {
          callback();
        }
      };
    return {
      userMessage:null,
      registerParams: [],
      isShow: true,
      isRegisterIsShow: false,
      ruleForm: {
        cardId: "",
        cardType: "",
        cardIdTwo:""
        // phone: "",
        // code: "",
      },
      rules: {
        cardType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        cardIdTwo: [
            { required:true, validator: cardIdTwo, trigger: 'blur' }
          ],
        cardId: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
        ],
        // phone: [
        //   {
        //     required: true,
        //     validator: phone_rule,
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getCaptcha(captcha){
      console.log('传递验证码参数对象',captcha)

      this.getPersonVerify(captcha);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          this.$refs.captcha.show();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取用户信息
    getUserInfo() {
      console.log('获取用户信息');
      if(this.$route.query.personName){
        let params = {
          openid:this.$cookies.get("open_id"),
          verified_serialno:this.$cookies.get("transactionNo")
        }
        getPersonUserInfo(params).then(res =>{
          console.log('用户信息',res)
          this.userMessage = res;
          let cardId = res.person.idCard;
          console.log("cardId",cardId);
          if(cardId == this.$cookies.get("open_id")){
            console.log("实名认证");
            let params = {
              card_id:this.$cookies.get("open_id"),
              transaction_id:this.$cookies.get("transactionNo"),
              return_url:'https://ccw.ptaedu.cn/user/create_user'
            }
            createUser(params).then(res =>{
              console.log(res);
              this.$cookies.set("token",res.token);
              store.commit('setToken',res.token);
              this.isRegisterIsShow = true;
              this.$router.push('/user/myExam')
            }).catch(err =>{
              this.$message({type:"error",message:err.msg+'，'+err.errors})
            })
          }else{
            this.$router.push('/user/create_user');
            this.$message({
              type:"error",
              message:"证件类型或证件号码错误"
            })
          }
        })
      }
    },
    //实名认证
    getPersonVerify(captcha) {
      let params = {
        cert_type: this.ruleForm.cardType,
        openid: this.ruleForm.cardId,
        captcha: captcha,
        return_url:"https://ccw.ptaedu.cn/user/create_user"
      };
      getPersonVerifyUrl(params).then((res) => {
        console.log("实名认证", res);
        let { transactionNo, url } = res;
        this.$cookies.set(this.ruleForm.cardId, transactionNo);
        this.$cookies.set("open_id",this.ruleForm.cardId);
        this.$cookies.set("transactionNo",transactionNo)
        location.href = url;
      });
    },
  },
  components: {
    PasswordCaptcha,
    headerComponent
  },
};
</script>

<style>
.user-register .el-card {
  box-shadow: none;
  border: none;
}
</style>

<style scoped>
.demo-ruleForm{
  width: 400px;
  margin: 0 auto;
}
.register-header {
  position: relative;
  background-image: url("../../../assets/register/jgbanner.jpg");
}
.footer-content {
  font-size: 12px;
  color: white;
}
.box-card {
  width: auto;
}

.user-register {
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
